<template>
    <div class="wrap" style="margin-bottom: 10px;width:100%;height:250px;margin-top: 5px;">
        <a-form style="display: flex;flex-wrap: wrap;">
            <a-form-item v-bind="validateInfos.name" style="margin-top: 0px;">
                <div>
                    <p>患者姓名<span class="star">*</span></p>
                    <a-input v-model:value="modelRef.name" placeholder="患者姓名/手机号码/证件号码/卡号" />
                </div>
            </a-form-item>
            <a-form-item v-bind="validateInfos.DocId" style="margin-top: 0px;">
                <div>
                    <p>患者卡号</p>
                    <a-input v-model:value="modelRef.DocId" />
                </div>
            </a-form-item>

            <a-form-item v-bind="validateInfos.age" style="margin-top: 0px;">
                <div>
                    <p>患者年龄<span class="star">*</span></p>
                    <a-input v-model:value="modelRef.age" />
                </div>
            </a-form-item>

            <a-form-item v-bind="validateInfos.date">
                <span>出生日期</span><span class="star">*</span>
                <a-date-picker value-format="YYYY-MM-DD" v-model:value="modelRef.date" />
            </a-form-item>

            <div style="height:10px;;">
                <span>性别</span><span class="star">*</span>
                <a-form-item name="area" v-bind="validateInfos.sex">
                    <!--:options="areas"-->
                    <select style="width:250px;height:32px;border:1px solid #D9D9D9;transform: translateY(-6px);"
                        :style="{ border: inputColor }" v-model="modelRef.sex">
                        <option></option>
                        <option>男</option>
                        <option>女</option>
                    </select>
                </a-form-item>
            </div>
            <a-form-item name="area" v-bind="validateInfos.tel">
                <div>
                    <p>手机号码</p>
                    <a-input v-model:value="modelRef.tel" />
                </div>
            </a-form-item>
            <a-form-item name="area" v-bind="validateInfos.Id">
                <div>
                    <p>证件号码</p>
                    <a-input v-model:value="modelRef.Id" />
                </div>
            </a-form-item>
        </a-form>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, onBeforeMount, watchEffect, watch } from 'vue'
import Bus from "@/mitt/index"
// import Bus from "../../../utils/Bus"
interface UserType {
    name?: string;
    age?: number;
    key?: number;
}
interface FormState {
    group: string;
    users: UserType[];
}

interface Sights {
    value: string;
    price: string;
    id: number;
}
import { Form } from 'ant-design-vue';
const useForm = Form.useForm;
import { useStore } from "vuex"

export default defineComponent({
    setup() {
        const store = useStore()
        const value1 = ref<string>('');
        const value2 = ref<string>('');
        const value3 = ref<string>('');
        const value4 = ref<string>('');
        const value5 = ref<string>('');
        const test = ref<string>('');
        const formState = reactive<FormState>({
            group: '',
            users: [],
        });

        const inputColor = ref("1px solid #D9D9D9")
        const modelRef = reactive({
            name: "",
            DocId: '',
            age: "",
            date: '',
            sex: '',
            tel: '',
            Id: ""
        });
        const rulesRef = reactive({
            name: [{ required: true, message: '姓名不能为空', },],
            DocId: [{ required: true, message: '病号不能为空', },],
            age: [{ required: true, message: '年龄不能为空' },],
            date: [{ required: true, message: '出生日期不能为空' },],
            sex: [{ required: true, message: '性别不能为空' },],
            tel: [{ required: true, message: '手机号不能为空' },],
            Id: [{ required: true, message: '身份证号不能为空' },],
        });

        const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef);

        // onBeforeMount(() => {
        //     validate().then(() => {
        //         console.log(1)
        //         // Bus.on("saveSuccess", () => {
        //         //     console.log("success")
        //         // })
        //     }).catch((err: any) => {
        //         console.log(err)
        //     })
        // })

        onMounted(() => {
            // validate().then(() => {
            //     Bus.on("saveSuccess", () => {
            //         console.log("success")
            //     })
            // }).catch((err: any) => {
            //     console.log(err)
            // })
            watch(() => modelRef.sex, (newValue, oldValue) => {
                if (modelRef.sex) {
                    inputColor.value = "1px solid  #D9D9D9"
                } else {
                    inputColor.value = "1px solid red"
                }
            })


            Bus.on("saveSuccess", () => {

                validate()
                    .then(() => {
                        inputColor.value = "1px solid  #D9D9D9"
                        store.commit("changeAddSuccess", 1)
                        setTimeout(() => {
                            modelRef.name = ""
                            modelRef.DocId = ""
                            modelRef.age = ""
                            modelRef.date = ""
                            modelRef.sex = ""
                            modelRef.tel = ""
                            modelRef.Id = ""
                        }, 500);


                    })
                    .catch((err: any) => {
                        setTimeout(() => {
                            inputColor.value = "1px solid red"
                        }, 30);
                        store.commit("changeAddSuccess", 0)
                        // Bus.emit("test", 0)
                        console.log("err", err)
                    })



            })
        })
        const config = {
            rules: [{ type: 'string' as const, required: true, message: '' }],
        };
        const dynamicValidateForm = reactive<{ sights: Sights[]; area: string }>({
            sights: [],
            area: "",
        });
        // const areas = [
        //     { label: '男', value: '男' },
        //     { label: '女', value: '女' },
        // ];
        return {
            modelRef,
            inputColor,
            validateInfos,
            test,
            value1,
            value2,
            value3,
            value4,
            value5,
            config,
            formState,
            dynamicValidateForm,

        }
    }
})
</script>

<style scoped lang="less">
.ant-input,
.ant-form-item-control-input {
    width: 15.625rem;
}

.wrap {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;

    div {
        margin: 1.25rem 4.375rem 0rem 0rem;
        width: 15.6875rem;
    }
}

#fourdiv {
    margin-right: .625rem;
}

/deep/.ant-picker {
    width: 15.375rem;
    margin-top: 0rem;
    margin-right: 0rem;
    display: block;
    position: relative;
    top: -0.375rem;
}

.ant-form-item-control-input-content {
    margin-right: 0rem;
}

/deep/.ant-select-selector {
    width: 14.9375rem;
    height: 1.375rem;
    position: relative;
    top: -1.5625rem;
}

/deep/.ant-select-arrow {
    position: relative;
    top: -3.3125rem;
    left: 14.4375rem;
}

.star {
    color: red
}

.positions {
    position: relative;
    top: 14px;
}
</style>